<template>
  <div class="homepage" style="padding-bottom: 50px;">
    <van-image class="w-100" :src="require('../assets/images/header_bg.png')"></van-image>

    <div class="content_box">
      <van-collapse v-model="activeNames" accordion :border="false">
        <template v-for="(item, index) in menuList">
          <template v-if="index === 0">
            <van-cell center class="link_cell" :key="index">
              <template slot="icon">
                <van-image style="width: 32px; height: 32px" :src="item.icon"></van-image>
              </template>

              <template slot="title">
                <span style="margin-left: 16px;">{{ item.text }}</span>
              </template>

              <template slot="default">
                <span style="color: #1e8dff;">{{ item.number }}{{ item.unit }}</span>
              </template>
            </van-cell>
          </template>

          <template v-else>
            <van-collapse-item :name="index" :key="index">
              <template slot="icon">
                <van-image style="width: 32px; height: 32px;" :src="item.icon"></van-image>
              </template>

              <template slot="title">
                <span style="margin-left: 16px;">{{ item.text }}</span>
              </template>

              <template slot="value">
                <span style="color: #1E8DFF;">{{ item.number }}{{ item.unit }}</span>
              </template>

              <template class="van-collapse-item__content" v-if="index>0">
                <template>
                  <div style="margin-top:15px;">
                    <span>日期范围</span>
                    <button v-bind:class="ys1? 'whole':'time'" @click="quanbu()">全部</button>
                    <button v-bind:class="ys2? 'time':'whole'" @click="yesterday()">昨天</button>
                    <button v-bind:class="ys3? 'time':'whole'" @click="lastday()">近7天</button>
                    <button v-bind:class="ys4? 'time':'whole'" @click="nearlyday()">近30天</button>
                  </div>
                  <div style="margin-top:12px;">

                    <span>自定义</span>
                    <!-- 开始 -->
                    <input class="start" v-model="item.showStart" placeholder="请选择日期" @click="showPopFn(index)" />
                    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
                      <van-datetime-picker v-model="item.currentDate" type="date" title="选择时间段" :min-date="item.minDateStart"
                                           :max-date="item.maxDateStart" @confirm="confirmFn(index)" @cancel="cancelFn(index)" />
                    </van-popup>
                    <span>一</span>
                    <!-- 结束 -->
                    <input class="end" v-model="item.showDate" placeholder="请选择日期" @click="endPopFn(index)" />
                    <van-popup v-model="end" position="bottom" :style="{ height: '40%' }">
                      <van-datetime-picker v-model="item.endDate" type="date" title="选择时间段" :min-date="item.minDate" :max-date="item.maxDate"
                                           @confirm="confirmEn(index)" @cancel="cancelEn(index)" />
                    </van-popup>

                    <button style="width:52px;margin-left:10px;backgroundColor:#1E8DFF;border:0;borderRadius:12px;font-size:12px;color:#FFF;"
                            @click="search()">搜索</button>
                  </div>
                  <h3 style="font-size:15px;color:#1E8DFF;">排行/累计用户({{item.unit}})</h3>
                  <div>
                    <img src="../assets/images/ranking/icon_1.jpg" alt="" style="width: 13px; height: 17px;margin-right: 12px;">

                    <label style="margin-right:203px;">A社区</label>
                    <strong style="color:#1E8DFF;">3200</strong>
                  </div>
                  <div style="margin-top:10px;">

                    <img src="../assets/images/ranking/icon_2.jpg" alt="" style="width: 13px; height: 17px;margin-right: 12px;">

                    <label style="margin-right:203px;">B社区</label>
                    <strong style="color:#1E8DFF;">3096</strong>
                  </div>
                  <div style="margin-top:10px;">

                    <img src="../assets/images/ranking/icon_3.jpg" alt="" style="width: 13px; height: 17px;margin-right: 12px;">

                    <label style="margin-right:203px;">C社区</label>
                    <strong style="color:#1E8DFF;">2063</strong>
                  </div>
                  <div style="margin-top:10px;">
                    <span style="margin-right:17px;float:left;">4</span>
                    <label style="margin-right:203px;">D社区</label>
                    <strong style="color:#1E8DFF;">1289</strong>
                  </div>
                  <div style="margin-top:10px;">
                    <span style="margin-right:17px;float:left;">5</span>
                    <label style="margin-right:203px;">E社区</label>
                    <strong style="color:#1E8DFF;">1089</strong>
                  </div>
                  <div style="margin-top:10px;">
                    <span style="margin-right:17px;float:left;">6</span>
                    <label style="margin-right:203px;">F社区</label>
                    <strong style="color:#1E8DFF;">1023</strong>
                  </div>
                  <div style="margin-top:10px;">
                    <span style="margin-right:17px;float:left;">7</span>
                    <label style="margin-right:203px;">G社区</label>
                    <strong style="color:#1E8DFF;">1004</strong>
                  </div>
                  <div style="margin-top:10px;">
                    <span style="margin-right:17px;float:left;">8</span>
                    <label style="margin-right:203px;">H社区</label>
                    <strong style="color:#1E8DFF;">3089</strong>
                  </div>
                </template>
              </template>
            </van-collapse-item>
          </template>
        </template>
      </van-collapse>
    </div>

    <TabBarList :active-tab="0"></TabBarList>
  </div>
</template>

<script>
import TabBarList from '../components/Tabbar'

export default {
  name: 'Homepage',

  components: {
    TabBarList
  },

  data () {
    return {
      menuList: [{
        text: '社区民警数',
        icon: require('../assets/images/homepage/icon_1.png'),
        unit: '个',
        number: 16,
        isShow: true

      },
      {
        text: '关注用户数',
        icon: require('../assets/images/homepage/icon_2.png'),
        unit: '万',
        number: 3.6,
        isShow: true,
        endDate: new Date(),
        showDate: '',
        showStart: '',
        currentDate: new Date(),
        minDateStart: new Date(2017, 12, 1), // 开始时间最小
        maxDateStart: new Date(), // 开始时间最大 当前时间
        minDate: new Date(), // 最小时间必须 》开始的最大时间maxDateStart
        maxDate: new Date() // 最小时间最大 当前时间
      },
      {
        text: '信息发布数',
        icon: require('../assets/images/homepage/icon_3.png'),
        unit: '篇',
        number: 36,
        isShow: true,
        endDate: new Date(),
        showDate: '',
        showStart: '',
        currentDate: new Date(),
        minDateStart: new Date(2017, 12, 1), // 开始时间最小
        maxDateStart: new Date(), // 开始时间最大 当前时间
        minDate: new Date(), // 最小时间必须 》开始的最大时间maxDateStart
        maxDate: new Date() // 最小时间最大 当前时间
      },
      {
        text: '线索举报数',
        icon: require('../assets/images/homepage/icon_4.png'),
        unit: '条',
        number: 36,
        isShow: true,
        endDate: new Date(),
        showDate: '',
        showStart: '',
        currentDate: new Date(),
        minDateStart: new Date(2017, 12, 1), // 开始时间最小
        maxDateStart: new Date(), // 开始时间最大 当前时间
        minDate: new Date(), // 最小时间必须 》开始的最大时间maxDateStart
        maxDate: new Date() // 最小时间最大 当前时间
      },
      {
        text: '案件回访数',
        icon: require('../assets/images/homepage/icon_5.png'),
        unit: '件',
        number: 36,
        isShow: true,
        endDate: new Date(),
        showDate: '',
        showStart: '',
        currentDate: new Date(),
        minDateStart: new Date(2017, 12, 1), // 开始时间最小
        maxDateStart: new Date(), // 开始时间最大 当前时间
        minDate: new Date(), // 最小时间必须 》开始的最大时间maxDateStart
        maxDate: new Date() // 最小时间最大 当前时间
      }
      ],
      activeNames: [],
      show: false, // 用来显示弹出层
      end: false,
      ys1:true,
      ys2:true,
      ys3:true,
      ys4:true

    }
  },
  methods: {
    // 开始时间
    showPopFn () {
      this.show = true
    },
    confirmFn (index) { // 确定按钮
      this.menuList[index].showStart = this.timeFormat(this.menuList[index].currentDate)
      this.show = false
    },
    cancelFn () {
      this.show = false
    },
    // 结束时间
    endPopFn (index) {
      if (this.menuList[index].showStart == '') {
        this.menuList[index].minDate = new Date(2017, 12, 1)
        this.menuList[index].maxDate = new Date()
      } else {
        this.menuList[index].minDate = new Date(this.menuList[index].showStart)
      }
      this.end = true
    },
    confirmEn (index) { // 确定按钮
      this.menuList[index].showDate = this.timeFormat(this.menuList[index].endDate)
      this.menuList[index].maxDateStart = this.menuList[index].endDate
      this.end = false
    },
    cancelEn () {
      this.end = false
    },
    timeFormat (time) { // 时间格式化 2019-09-08
      const year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      return year + '-' + month + '-' + day
    },
    //  全部
    quanbu () {
      this.ys1 = true
      this.ys2 = true
      this.ys3 = true
      this.ys4 = true
    },
    //  昨天
    yesterday () {
      this.ys1 = false
      this.ys2 = false
      this.ys3 = true
      this.ys4 = true
    },
    // 近七天
    lastday () {
      this.ys1 = false
      this.ys2 = true
      this.ys3 = false
      this.ys4 = true
    },
    // 近30天
    nearlyday () {
      this.ys1 = false
      this.ys2 = true
      this.ys3 = true
      this.ys4 = false
    },
    // 搜索
    search () {
      alert(1)
    },

  },
  mounted () {
    this.timeFormat(new Date())
  }
}
</script>



<style scoped lang="less">
  .homepage {
    width: 100vw;
  }

  .content_box {
    width: 100vw;
  }
</style>

<style>
  .homepage .van-collapse {
    margin: 0 15px;
  }

  .homepage .van-collapse-item, .link_cell {
    margin: 16px 0;
    text-align: left;
  }

  .homepage .van-collapse-item .van-cell {
    display: flex;
    align-items: center;
    box-shadow: 0px 7px 8px -4px #CEE6FF;
  }

  .btn::after {
    border: 0;
  }

  .whole {
    width: 17%;
    margin-left: 3%;
    background-color: #F2F8FF;
    border-radius: 12px;
    border: 0;
    color: #1E8DFF;
    font-size: 10px
  }

  .time {
    width: 17%;
    margin-left: 3%;
    background-color: white;
    border-radius: 12px;
    border: 1px solid #EDEDED;
    color: #999;
    font-size: 10px
  }

  .start {
    width: 76px;
    background-color: white;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    margin-left: 10px;
    margin-right: 2px;
    font-size: 10px;
    text-align: center;
  }

  .end {
    width: 76px;
    background-color: white;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    margin-left: 2px;
    font-size: 10px;
    text-align: center;
  }
</style>
